
<html>
<!-- PoPo 数据可视化 PoPoDV.com -->
<!-- Polar Heatmap http://www.popodv.com/dv/ecacec1538831599246.html -->
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>PoPo数据可视化_Polar Heatmap</title>
		<script src="http://static.popodv.com/dvlibs/alipay/g2.v3.2.8.min.js"></script>
		<script src="http://static.popodv.com/dvlibs/alipay/data-set.v0.9.6.min.js"></script>
		<script src="http://static.popodv.com/dvlibs/tool/jquery.min.js"></script>
		<style>html,body,#container{width:100%;height:100%;margin:0;padding:0;}</style>
	</head>
	<body>
		<div id="container"></div>
		<script>

        var data = [{"week":"Monday","time":"Midnight","value":0.176042},{"week":"Monday","time":"1am","value":0.096146},{"week":"Monday","time":"2am","value":0.076414},{"week":"Monday","time":"3am","value":0.334734}];

		$('#container').css({
			overflow: 'hidden'
		});

		function show (data) {
			var chart = new G2.Chart({
				container: 'container',
				forceFit: true,
				height: $("#container").height(),
				padding: 40
			});
			chart.source(data);
			chart.tooltip({
				showTitle: null
			});
			chart.coord('polar', {
				innerRadius: 0.2
			});
			chart.legend(false);
			chart.axis('week', {
				grid: null,
				line: null,
				tickLine: null,
				label: null
			});
			chart.axis('time', {
				line: null,
				tickLine: null,
				grid: null,
				label: {
					offset: 3
				}
			});
			chart.polygon().position('time*week').color('value', '#DC143C-#FFFFFF-#0000FF-#FFFFFF-#00FF7F').tooltip('week*time*value').style({
				stroke: '#FFF',
				lineWidth: 1
			});
            console.log(chart);

			var values = ['Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.', 'Sun.'];
			values.map(function (val, idx) {
				chart.guide().text({
					top: true,
					position: [0, idx],
					content: val,
					style: {
						fill: '#fff',
						textAlign: 'center',
						shadowBlur: 2,
						shadowColor: 'rgba(0, 0, 0, .45)'
					}
				});
			});
			chart.render();
		};

        show (data);
				</script>
</body>
</html>